<template>
    <div
        style="
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
        "
    >
        <el-table :data="tabledata" border style="width: 100%; height: 90%">
            <template v-for="(item, index) in tableheader" :key="index">
                <el-table-column :label="item.name" :width="item.width" v-if="!item.type">
                    <template #default="scope">
                        <span>{{ scope.row[item.key] }}</span>
                    </template>
                </el-table-column>

                
                <el-table-column :label="item.name" :width="item.width" v-if="item.type=='tags'">
                    <template #default="scope">
                        <div v-for="(tagitem,tagindex) in item.typedata" :key="tagindex">
                            <el-tag :type="tagitem.type" v-if="scope.row[item.key]==tagitem.value">
                                {{ scope.row[item.key] }}
                            </el-tag>
                        </div>                        
                    </template>
                </el-table-column>
            </template>

            <el-table-column v-if="showcz" fixed="right" label="操作" :width="czwidth">
                <template  #default="scope">
                    <slot name="btns" :row="scope.row">

                    </slot>

                </template>
            </el-table-column>
        </el-table>

        <div style="height: 10%; display: flex; justify-content: flex-end">
            <el-pagination
                background
                layout="prev, pager, next"
                v-model:current-page="currentPage"
                :total="1000"
                @current-change="CurrentChange"
            />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineProps, inject, PropType,ref } from "vue";
const getdata = inject<() => void>('getdata')!;;//父组件的方法

const props = defineProps({
    tabledata: {
        type: Array as PropType<any[]>,
        required: true,
    },
    tableheader: {
        type: Array as PropType<any[]>,
        required: true,
    },
    showcz:{
        type:Boolean,
        default:true
    },
    czwidth:{
        type:String,
        default:"150px"
    }
});

//当前页数
let currentPage = ref(1);

const CurrentChange = (val: number) => {
    console.log(val);
    getdata()
}
// 通过 defineExpose 暴露给父组件
defineExpose({
    currentPage
});
</script>





<style lang="scss" scoped>
.green_status div {
    color: #52c41a;
    background: #f6ffed;
    border-color: #b7eb8f;
    box-sizing: border-box;
    padding: 0 7px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    width: fit-content;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
}

.notgreen_status div {
    color: rgba(0, 0, 0, 0.65);
    background: rgb(250, 250, 250);
    border-color: #d9d9d9;
    box-sizing: border-box;
    padding: 0 7px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    width: fit-content;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
}

.red_text {
    color: red;
}

.gre_text {
    color: green;
}

.yellow_text {
    color: yellow;
}

.spanbg {
    background-color: rgba(0, 0, 0, 0.15);
    padding: 4px 10px;
    border-radius: 4px;
}

:deep(.el-table) {
    background-color: #fff;

    &::before,
    &::after,
    .el-table--border:before,
    .el-table--border:after {
        background-color: #e4e7ed;
    }

    &.el-table--border,
    &.el-table--group {
        border-color: #e4e7ed;
    }

    .el-table__cell {
        border-color: #e4e7ed;
    }

    .el-table__body {
        tr td:last-child {
            background-color: #fff;
            border-left: 1px solid #e4e7ed;

            .cell {
                button {
                    margin: 0;
                }
            }
        }
    }

    tr {
        background-color: transparent;
    }
}

:deep(.el-pagination) {
    display: flex;

    .el-input__inner {
        background-color: transparent;
        border: none;
    }

    .el-input {
        border-radius: 8px;
        box-shadow: 0 0 0 1px #e4e7ed inset;
    }
}
:deep(.blueclass){
    background-color: #409eff;
    color: #fff;
}
</style>